<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>thumb</title>

<link rel="stylesheet" href="../styles/uigg.css">

<script src="../js/jquery.min.js"></script>
<script src="../js/uigg.js"></script>
</head>

<body class="center" uigg="bg">

<style>
    li {width: 400px;height: 100px;display: block;color: white;font-size: 30px;text-transform: capitalize;background-color: var(--sapphire);}
    li:first-child {background-color: transparent;}
</style>

<!----------------------------------------------------------------------------------------->

<section>
    <li class="center mix-abrazine">abrazine</li>
    <li class="center mix-hue">hue</li>
    <li class="center mix-multiply">multiply</li>
    <li class="center mix-screen">screen</li>
    <li class="center mix-luminosity">luminosity</li>
    <li class="center mix-difference">difference</li>
    <li class="center mono">mono</li>
    <li class="center mono-click">mono-click</li>
</section>

<!----------------------------------------------------------------------------------------->

</body>
</html>